<template>
    <HeadImage :background="backPath" style="height: 25vh">
        <p slot="two" class="head">{{ disposition[0] }}</p>
    </HeadImage>
    <div class="box">
        <div v-html="content"></div>
        <input placeholder="文章标题----" class="essay_title" v-model="essay.title" maxlength="50">
        <ArticleEditingType :essay-type="article_type" @handleTypeAdd="handleTypeAdd"></ArticleEditingType>
        <input type="text" v-model="essay.password" placeholder="文章加密密码,无密码则不加密" class="password">
        <div contenteditable="true" class="essay_body" @input="contentBody" ref="edit"></div>
        <form method="post" enctype="multipart/form-data" action="">
            <a class="file " @change="getFileAll">选择图片
                <input type="file" name="file" id="myFile" ref="img" multiple>
            </a>
            <div class="essay_img">
                <ul>
                    <li v-for="(item,index) in echo_img" v-if="echo_img.length>0">
                        <p @click="delImg(item,index)">x</p>
                        <img :src="item" alt="" style="width: 200px">
                    </li>
                </ul>
            </div>
            <div class="choose">
                <span @click="return_" class="return">返回</span>
                <div class="submit" @click="submit">提交</div>
            </div>
        </form>
    </div>
</template>

<script>

import api from "@/api";
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import store from "@/store";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import {baseUrl} from "@/config/global/global";
import ArticleEditingType from "@/components/articleEditing/ArticleEditingType.vue";

export default {
    name: "ArticleModifications",
    components: {ArticleEditingType, SiteInformation, HeadImage},
    data() {
        return {
            backPath: "",
            content: "",
            essay: {
                title: "",
                img: "",
                body: "",
                encrypt: 0,
                password: "",
                type: "",
            },
            files_: [],
            fileImg: [],//原图片回显的数组
            article_type:'', //图片分类
            disposition: "",
            echo_img:[],
        }
    },

    mounted() {
        let writing = JSON.parse(window.localStorage.getItem("DataContent"));
        setTimeout(() => {
            if (writing) {
                if(writing){
                    this.disposition = writing[13].content.split("|||||");
                    this.backPath = writing[12].content;
                }
            }
        }, 100)

        let Article_editing = JSON.parse(window.localStorage.getItem("Article_editing_"));
        if (Article_editing != null) {
            this.essay = Article_editing;
            if(this.essay.img !== ""){
                this.echo_img = this.essay.img.split(",")
                this.fileImg = this.essay.img.split(",")
            }
            this.$refs.edit.innerHTML = this.essay.body
            this.article_type = this.essay.type!== "" ?  this.essay.type.split(",") :[];
        }
    },

    methods: {
        handleTypeAdd(type){
            this.article_type = type;
        },

        //上传文章图片请求
        submit() {
            if(this.article_type.toString() === ""){
                alert("分类不为空")
                return
            }
            if(this.essay.title === "" || this.essay.title === " "){
                alert("标题不为空")
                return
            }
            // 添加需要上传的文件
            const form = new FormData();
            let _this = this;
            this.essay.type =   this.article_type.toString()
            for(let i=0;i<_this.files_.length;i++){
                form.append('files', _this.files_[i]);
            }
            this.imgPath();
            form.append('writings',JSON.stringify(this.essay));
            api.writingsUpdate(form).then((res)=>{
                if(res.data.code===200){
                    this.$router.replace({path:'/home'});
                }else {
                    alert("更新失败")
                }
            })

        },

        imgPath(){
            let path="";
            for(let i=0;i< this.fileImg.length;i++){
                path+=this.fileImg[i];
                 if(i<this.fileImg.length-1){
                     path+=",";
                 }
            }
            this.essay.img = path;
        },

        getFileAll(){
                  let myFile = document.querySelector("#myFile");
                  let f = myFile.files;
                  // 通过 file 生成目标 url
                  let URL = window.URL || window.webkitURL;
                  for(let i=0;i< f.length;i++){
                     this.files_.push(f[i]);
                     this.echo_img.push(URL.createObjectURL(f[i]))
                  }
        },

        delImg(item, index) {
            let count =0;
            for (let i = 0; i < this.fileImg.length; i++) {
                if (!this.fileImg[i].includes("!del")) {
                    count++;
                }
            }

            if(index <this.fileImg.length) {
                for (let i = 0; i < this.fileImg.length; i++) {
                    if (!this.fileImg[i].includes("!del") && i === index) {
                        this.fileImg[index] += "!del";
                        this.echo_img.splice(index, 1)
                    }
                }
            }

            if(index >= count){
                this.echo_img.splice(index, 1)
                this.files_.splice(index - count, 1)
            }



        },

        //保存文章信息按钮
        return_() {
            this.$router.push("/personalInformation");
        },
        //更新文章
        update_writing(item){
            this.essay.img = item
            api.writingsUpdate(this.essay).then((res)=>{
                if(res.data.code === 200){
                    alert("修改成功")
                    this.$router.push("/personalInformation");
                }
            })
        },
        contentBody() {
            this.essay.body = this.$refs.edit.innerHTML
        },

    },




}
</script>

<style scoped>
input, .essay_body {
    outline: none;
    border: 0;
    margin-bottom: 1vh;
}

.box {
    width: 52vw;
    min-width: 386px;
    min-height: 40vh;
    padding: 10px;
    background: #fbfbfd;
    border-radius: 5px;
    margin: auto;
    margin-bottom: 50px;
    animation: lis .5s ease-in-out 0s 1 forwards;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@keyframes lis {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.essay_title {
    display: block;
    outline: 0 none;
    resize: none;
    padding: 5px;
    width: 100%;
    font-size: 25px;
    font-weight: bolder;
    color: #4f4c4c;
    overflow: hidden;
    word-break: break-all;
    border-bottom: 1px solid #8f8c8c;
}


.essay_body {
    padding: 20px;
    background: #c0c7c1;
    min-height: 50vh;
    height: 100%;
    color: #494545;
}

.essay_img {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
    background: #f8e5e5;

}

.essay_img ul {
    width: 100%;
    height: 100%;
    min-height: 90px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.essay_img ul li {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    animation: imgBox .5s ease-in-out 0s 1 forwards;
}

.essay_img ul li img {
    height: 100px;

}

input[type="file"] {
    opacity: 0;
}

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}

.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
    cursor: pointer;
}

.submit, span {
    width: 100px;
    height: 40px;
    border: 0;
    color: white;
    font-size: 15px;
    background: #8acef5;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
}

.choose span {
    display: inline-block;
    text-align: center;
    line-height: 40px;
    background: #e5a31b;
    margin-right: 30px;
}

.submit:hover {
    opacity: .8;
    cursor: pointer;
}

.choose {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.password {
    width: 100%;
    max-width: 200px;
    padding: 5px;

    border-bottom: 1px solid #8f8c8c;
    color: #8f8c8c;
    height: 35px;


}

.essay_img ul li p{
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    z-index: 99;
    text-align: center;
    color: #f0f1f5;
    background: #c0bbbb;

}
.submitType{
   padding: 5px;
   border: 0;
   background: #3586f1;
   color: white;
   width: 50px;
   margin-left: 10px;
}
.submitType:hover{
    opacity: .8;
}
.addType{
    display: flex;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
}
.addType input{
    border-bottom: 1px solid #8f8c8c;
    width: 120px;
    height: 35px;
}
.addType ul{
    display: flex;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
}
.addType li span{
    height: 30px;
    padding: 5px 8px;
    background: #29c8e3;
    margin: 3px 5px;
}
.addType li{
    position: relative;
}
.del_classification_type{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -8px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 18px;
    text-align: center;
    color: #101010;
    border-radius: 50%;
}

.addType li span .del_classification_type:hover{
    color: #096ef5;
}
.addType li span .del_classification_type {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 15px;
    height: 15px;
    z-index: 99;
    font-size: 14px;
    text-align: center;
    color: #f0f1f5;
    background: #e32828;
    cursor: pointer;
}

.return:hover{
    cursor: pointer;
    opacity: .8;
}

@keyframes imgBox {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.essay_img ul li p:hover {
    cursor: pointer;
    opacity: .9;
}

</style>